<template>
  <PopupCpt ref="refPopupCpt">
    <template #default>
      <van-sticky>
        <van-nav-bar
          title="意见反馈"
          left-text="返回"
          left-arrow
          @click-left="close"
        />
      </van-sticky>
      <div class="content">
        <van-form @submit="submit">
          <!-- 内容 -->
          <van-cell-group inset style="margin: 10px">
            <van-row>
              <van-col span="24">
                <van-field
                  v-model="feedbackData.text"
                  show-word-limit
                  :autosize="{ minHeight: 240 }"
                  type="textarea"
                  maxlength="2000"
                  :rules="[{ required: true, message: '请输入反馈内容' }]"
                  placeholder="请输入问题描述"
                />
              </van-col>
            </van-row>
          </van-cell-group>
          <!-- 按钮 -->
          <div class="btns">
            <van-button
              size="small"
              color="#07C160"
              :disabled="apis.submit.status === 1"
              :loading="apis.submit.status === 1"
              native-type="submit"
              >提 交</van-button
            >
          </div>
        </van-form>
      </div>
    </template>
  </PopupCpt>
</template>
<script lang="ts">
import axios from '../../../../api/axios'
import PopupCpt from '/@/components/PopupCpt.vue'
import { Toast } from 'vant'
import { useStore } from '/@/store'
import { defineComponent, ref, Ref, onBeforeMount } from 'vue'

export default defineComponent({
  components: { PopupCpt },
  setup() {
    const { commit, state } = useStore()
    const refPopupCpt: Ref = ref(null) // 弹出框的$refs值
    const feedbackData: any = ref({
      text: '', // 内容
    })
    // 接口请求url、请求状态、参数等信息
    const apis: any = ref({
      // 提交接口
      submit: {
        url: '',
        type: 'post', // 接口请求类型
        status: 0, // 接口请求状态，0=未请求，1=请求中
        getParams(params: any) {
          // 参数
          return {
            tenantId: state.user.tenantId,
          }
        },
      },
    })
    // 调用接口
    async function callApi(
      apiOp: {
        status: number
        url: string
        type: string
        getParams: Function | null
      },
      params: any,
      callback: Function | null // 成功的回调
    ) {
      console.log('callApi', JSON.stringify(params))
      if (typeof apiOp['getParams'] === 'function') {
        params = apiOp['getParams'](params)
      }
      apiOp['status'] = 1 // 请求中
      let res = await axios[apiOp['type']](apiOp['url'], params)
      if (res.status === 200 && res.data.success) {
        // 请求成功
        if (typeof callback === 'function') {
          callback(params)
        }
      } else {
        Toast('请求失败')
      }
      apiOp['status'] = 0 // 恢复未请求状态
    }
    // 显示
    function show() {
      refPopupCpt.value.show()
    }
    // 隐藏
    function close() {
      refPopupCpt.value.close()
    }
    return {
      refPopupCpt,
      feedbackData,
      apis,
      show,
      close,
      submit() {
        callApi(apis.value.submit, feedbackData.value, () => {
          // 成功的回调
          Toast('提交成功！')
          close()
        })
      },
    }
  },
})
</script>

<style lang="less" scoped>
.btns {
  margin: 10px 10px 20px;
  text-align: center;
  button {
    margin: 0 10px;
    padding: 0 40px;
  }
}
</style>
